<html>
    <head>
        <title>Jquery IndexedDB Plugin</title>
        <script>
            function data(){
                return {
                    "bookName": "bookName-" + parseInt(Math.random() * 100),
                    "price": parseInt(Math.random() * 1000),
                    "checkedOut": new Date()
                }
            };
        </script>
        <script src = "http://nparashuram.com/jquery-indexeddb/dist/jquery.indexeddb.js" type="text/javascript">
        </script>
    </head>
    <body>
        <div class = "splash">
            <h2>Jquery IndexedDB Plugin</h2>
            <p>
                The examples listed here illustrate the use of IndexedDB Jquery plugin.
            </p>
        </div>
        <ul>
            <li class="example-set">
                <a class="example-set-name" href="#">Database</a>
                <ul>
                    <li class="example">
                        <a class="example-name">Open Database</a>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").then(write, writeError);
                        </script>
                        <div class = "example-docs">
                            <h3>Open Database</h3>
                            The Jquery IndexedDB Plugin is available off the global Jquery object under the property 'indexeddb'. The first argument passed to this is the name of the database that should be opened. Among other things, this object also returns a $.Deferred().promise() object that can be used to monitor the status of the opereation.
                        </div>
                    </li>
                    <li class="example">
                        <a class="example-name" href="#">Database properties</a>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").then(function(db){
                                write("Current Database", db);
                                write("Database version", db.version);
                            }, writeError);
                        </script>
                        <div class = "example-docs">
                            <h3>Database Properties</h3>
                            <p>
                                The indexeddb() method returns a promise among other things. The "resolve-callback" of the promise has the database object that can be used to query the various properties of the database.
                            </p>
                        </div>
                    </li>
                    <li class="example">
                        <a class="example-name">Set Version</a>
                        <div class="example-docs">
                            <h3>Set Version</h3>The setVersion method changes the version of the database. It returns a promise object. 
                            <br>
                            Note that the version number is optional; if not specified, the version of the database is incremented by 1. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").setVersion(10).then(write, writeError);
                        </script>
                    </li>
                </ul>
            </li>
            <li class="example-set">
                <a style="display: inline; background-image: url(&quot;images/opened.png&quot;);" class="example-set-name">Object Store</a>
                <ul>
                    <li class="example">
                        <a class="example-name">Transaction</a>
                        <div class="example-docs">
                            <h3>Transaction</h3>The transaction object allows operations to be performed inside a transaction scope. The arguments that the transaction method takes are
                            <br>
                            <ol>
                                <li>
                                    Array of object stores on which the transaction should exist. If a null array is specified, the transaction is on all object stores on the database. 
                                    <br>
                                </li>
                                <li>
                                    The type of transaction; one of READ and READ_WRITE on the IDBTransaction Object. 
                                    <br>
                                </li>
                            </ol>
                            After all operations on the transaction are complete, the transaction is closed automatically. 
                            <br>
                        </div>
                        <script type = "text/javascript">
                            var transaction = $.indexeddb("BookShop-1").transaction([], IDBTransaction.READ_WRITE);
                            transaction.then(write, writeError);
                            transaction.objectStore("BookList").add(data()).then(write, writeError);
                            transaction.objectStore("OldBookList").add(data()).then(write, writeError);
                        </script>
                    </li>
                    <li class="example">
                        <a class="example-name">Open Object Store, but don't create</a>
                        <div class="example-docs">
                            <h3>Open Object Store (Don't Create)</h3>The objectStore() method opens an object store for saving or fetching objects. It takes the following arguments. 
                            <br>
                            <ol>
                                <li>
                                    Name of the ObjectStore
                                </li>
                                <li>
                                    Optional Second Argument
                                </li>
                                <ol>
                                    <li>
                                        true, undefined or not specified: Create an object store with keyPath=id and autoIncrement the keyPath.
                                        <br>
                                    </li>
                                    <li>
                                        false: If the object store does not exist, don't create it. Throw an error instead.&nbsp;
                                    </li>
                                    <li>
                                        Any other object: Use the keyPath and autoIncrement properties of the object to create the object.
                                    </li>
                                </ol>
                            </ol>Among other things, it returns a promise that can use used to get a handle to the objectStore
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            // A false as the second argument store indicates that the object store should not be created if it does not exist.
                            $.indexeddb("BookShop-1").objectStore("BookList", false).then(write, writeError);
                        </script>
                    </li>
                    <li class="example" id="objectStore">
                        <a class="example-name">Create or Open Object Store</a>
                        <div class="example-docs">
                            <h3>Create Object Store</h3>Create an object store. It takes 2 arguments
                            <br>
                            <ol>
                                <li>
                                    &nbsp;Name of the object store
                                </li>
                                <li>
                                    Object with a keyPath and if the keyPath should be autoIncremented or not
                                </li>
                            </ol>If the object store already exists, this fails. If returns a promise to track the status of the operation. 
                            <br>
                            The version of the database in incremented by 1 automatically since IndexedDB requires the version of the database to change when this operation occurs.
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            // A false in the Object store indicates that the object store should not be created if it does not exist.
                            $.indexeddb("BookShop-1").objectStore("BookList", {
                                "keyPath": "id",
                                "autoIncrement": true
                            }).then(write, writeError);
                        </script>
                    </li>
                    <li class="example">
                        <a class="example-name">Delete object Store</a>
                        <div class="example-docs">
                            <h3>Delete Object Store</h3>Deletes the object store specified. 
                            <br>
                            The version of the database in incremented by 1 automatically since 
                            IndexedDB requires the version of the database to change when this 
                            operation occurs.
                            <br>
                            Hence, this may be blocked if other transactions are in progress. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            // A false in the Object store indicates that the object store should not be created if it does not exist.
                            $.indexeddb("BookShop-1").deleteObjectStore("BookList", false).then(write, writeError);
                        </script>
                    </li>
                    <li class="example-set">
                        <a class="example-set-name">CRUD on Object Store</a>
                        <ul>
                            <li class="example" depends="objectStore" id="add">
                                <a class="example-name">Add data to object store</a>
                                <div class="example-docs">
                                    <h3>Add Data</h3>Adds a data to the object store specified. The data must follow the rules defined in the keyPath and autoIncrement properties when the object store was created.
                                    <br>
                                    It returns a promise. 
                                    <br>
                                    <br>
                                </div>
                                <script type = "text/javascript">
                                    var book = data();
                                    $.indexeddb("BookShop-1").objectStore("BookList").add(book).then(function(e){
                                        book.id = e;
                                        write(e);
                                    }, writeError);
                                </script>
                            </li>
                            <li class="example" depends="add">
                                <a class="example-name">Get data from object store</a>
                                <div class="example-docs">
                                    <h3>Get Object</h3>Fetches the object given its keyPath value. 
                                    <br>
                                    It returns a promise. 
                                    <br>
                                </div>
                                <script type = "text/javascript">
                                    $.indexeddb("BookShop-1").objectStore("BookList").get(book.id).then(write, writeError);
                                </script>
                            </li>
                            <li class="example" depends="add">
                                <a class="example-name">Modify data in object store</a>
                                <div class="example-docs">
                                    <h3>Modify data</h3>Modifies the data in the object store. If the object with the keyPath value does not exist, it fails.
                                    <br>
                                    put() and update() methods are used for modifying the data. 
                                    <br>
                                    It returns a promise. 
                                    <br>
                                    <br>
                                </div>
                                <script type = "text/javascript">
                                    book["modified" + Math.random()] = true;
                                    $.indexeddb("BookShop-1").objectStore("BookList").update(book).then(write, writeError);
                                </script>
                            </li>
                            <li class="example" depends="add">
                                <a class="example-name">Removes object from object store</a>
                                <div class="example-docs">
                                    <h3>Delete Data</h3>Deletes data from the object store based on the keyPath value specified. 
                                    <br>
                                    delete() or remove() can be used to perform this operation. 
                                    <br>
                                    It returns a promise. 
                                    <br>
                                    <br>
                                </div>
                                <script type = "text/javascript">
                                    $.indexeddb("BookShop-1").objectStore("BookList").remove(book.id).then(write, writeError);
                                </script>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="example-set">
                <a class="example-set-name">Cursors</a>
                <ul>
                    <li class="example">
                        <a class="example-name">Iterate over all objects using cursors</a>
                        <div class="example-docs">
                            <h3>Iterate using Cursors</h3>Opens a cursor on the object store. The each() method is like the JQuery each method, allowing iteration over the various objects opened as a part of the cursor. 
                            <br/>
                            The cursor can take IDBKeyRange, or an array for defining cursors. The array should be of the format
                            <br/>
                            [lowerBound, upperBound, includeLowerValue, includeUpperValue].
                            <br/>
                            If value for lowerBound is not defined, the ranged cursor defined only has an upper bound.
                            <br/>
                            If value for upperBound is not defined, the ranged cursor defined only has an lower bound.
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").objectStore("BookList").openCursor().each(write);
                        </script>
                    </li>
                    <li class="example">
                        <a class="example-name">Update some objects</a>
                        <div class="example-docs">
                            <h3>Updating objects in a cursor</h3>The updateEach() method is like the each() method on the cursor with one variation. The current object is modified with the value that is returned by the callback function. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").objectStore("BookList").openCursor().updateEach(function(value){
                                if (parseInt(Math.random() * 10 % 2)) {
                                    value["modified-" + Math.random()] = true;
                                    write("Updating", value);
                                    return value;
                                }
                            });
                        </script>
                    </li>
                    <li class="example">
                        <a class="example-name">Delete some objects</a>
                        <div class="example-docs">
                            <h3>Deleting in Cursor</h3>The deleteEach() method is like the each() method on the cursor with one 
                            variation. The current object is deleted if the return value of the callback is true. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").objectStore("BookList").openCursor().deleteEach(function(value, key){
                                if (parseInt(Math.random() * 10 % 2)) {
                                    write("Deleting", value);
                                    return true;
                                }
                            });
                        </script>
                    </li>
                </ul>
            </li>
            <li class="example-set">
                <a class="example-set-name">Indexes</a>
                <ul>
                    <li class="example">
                        <a class="example-name">Open Index and iterate</a>
                        <div class="example-docs">
                            <h3>Iterate on Index</h3>This method opens an index (or creates if it does not already exist)
                            <br>
                            The argument is the property on which the index is to be created. The index thus created is propertyname + "-index". 
                            <br>
                            Once an index is opened, cursors can be used to iterate over it. Note that in case of such a cursor, the elements returned are sorted by the value in the indexed property. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").objectStore("BookList").index("price").openCursor().each(write);
                        </script>
                    </li>
                    <li class="example">
                        <a class="example-name example-name-selected">Key cursor on index</a>
                        <div class="example-docs">
                            <h3>Key Cursor on Index</h3>The key cursor on an index return the value of the keyPath instead of the object like in the case of the openCursor() method. 
                            <br>
                            <br>
                        </div>
                        <script type = "text/javascript">
                            $.indexeddb("BookShop-1").objectStore("BookList").index("price").openKeyCursor([200, 500]).each(write);
                        </script>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
